<template>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <div class="grid-container">
            <el-form-item label="产品型号">
                <el-input v-model="state.dataForm.productName" type="text" clearable placeholder="请输入产品型号"></el-input>
            </el-form-item>
            <el-form-item label="系列名称">
                <el-input v-model="state.dataForm.seriesName" type="text" clearable placeholder="请输入系列名称"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
                <el-input v-model="state.dataForm.brandName" type="text" clearable placeholder="请输入品牌名称"></el-input>
            </el-form-item>
          <el-form-item label="分类" prop="selectedClassPath">
            <el-cascader :options="classOptions" clearable
                         :props="cascaderProps"
                         :show-all-levels="false"
                         v-model="selectedClassPath"
                         @change="handleClassChange"></el-cascader>
          </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="state.dataForm.status" placeholder="请选择状态" clearable>
                    <el-option :label="'上架'" :value="0"></el-option>
                    <el-option :label="'下架'" :value="1"></el-option>
                </el-select>
            </el-form-item>
        </div>
        <div class="form">
            <div style="display: flex;">
                <el-form-item label="价格区间">
                    <el-input v-model="state.dataForm.minQuotation" type="number" placeholder="最低价" style="width: 120px;" clearable></el-input>
                </el-form-item>
                <span style="margin-top: 5px;margin-left: -4px;">___</span>
                <el-form-item label-width="10px">
                    <el-input v-model="state.dataForm.maxQuotation" type="number" placeholder="最高价" style="width: 120px;margin-left: 10px;" clearable></el-input>
                </el-form-item>
            </div>
            <div>
                <!-- 查询 -->
                <el-form-item>
                    <el-button @click="state.getDataList()"
                        style="background: rgba(22, 119, 255, 1);color: #fff;border-radius: 5px;">{{
                            $t("query") }}</el-button>
                </el-form-item>
                <!-- 重置 -->
                <el-form-item>
                    <el-button @click="resetForm"
                        style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
                </el-form-item>
                <!--新增-->
                <el-form-item>
                    <el-button @click="select()" v-if="state.hasPermission('noc:product:quotation:save')"
                        style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;">选择产品</el-button>
                </el-form-item>
            </div>
        </div>
        <el-table :header-cell-style="{ 'background': '#EFF4FF', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column align="center" prop="productName" label="产品型号" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="seriesName" label="系列名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="brandName" label="品牌" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="className" label="分类" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="quotation" label="报价" show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.quotation">{{ scope.row.quotation }}</span>
                <span v-else>询价</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="effectiveDate" label="报价时间" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="ifValid" label="产品状态" show-overflow-tooltip>
              <template v-slot="scope">
                    <span v-if="scope.row.ifValid === 0" style="color: #67C23A">在售</span>
                    <span v-else-if="scope.row.ifValid === 1" style="color: #F56C6C">已下架</span>
                    <span v-else-if="scope.row.ifValid === 2" style="color: #909399">停产</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" width="100" show-overflow-tooltip>
                <template v-slot="scope">
                    <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">{{ scope.row.status === 0 ? '上架' : '下架' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" prop="" label="操作" width="300">
                <template v-slot="scope">
                    <el-button link type="primary" v-if="state.hasPermission('noc:product:quotation:update')"
                        @click="addOrUpdateHandle(scope.row.id)">{{ $t("修改报价") }}</el-button>
                  <el-button v-if="scope.row.status !== 0 && state.hasPermission('noc:product:quotation:delete')" link type="primary"
                             @click="upHandle(scope.row.id)">上架</el-button>
                  <el-button v-if="scope.row.status !== 1 && state.hasPermission('noc:product:quotation:delete')" link type="danger"
                             @click="downHandle(scope.row.id)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./product-quotation-list-update.vue";
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";


const view = reactive({
    getDataListURL: '/noc/productuserquotation/list',
    getDataListIsPage: true,
    dataForm: {
        id: "",
        productName: "",
        seriesName: "",
        brandName: "",
        status: "",
        class1Id: "",
        class2Id: "",
        class3Id: "",
        minQuotation: "",
        maxQuotation: ""
    },

});
// 分类选项
const classOptions = ref<any[]>([]);
// 选中的分类路径
const selectedClassPath = ref<string[]>([]);
// 修改 props 为 cascaderProps
const cascaderProps = reactive({ value: "id", label: "className", children: "children", emitPath: true });
/**
 * 跳转人员查询详情页面
 */
const router = useRouter();
const select = () => {
    router.push({
        path: "/program/select-product-series",
    });
};

//新增
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(id,);
    });
};

//刷新数据
const refreshDataList = () => {
    state.refreshDataList();
};

// 上架
const upHandle = (id: number) => {
  baseService.post('/noc/productuserquotation/up', { id }).then(res => {
    if (res && res.code === 0) {
      ElMessage.success('上架成功');
      state.refreshDataList()
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 下架
const downHandle = (id: number) => {
  baseService.post('/noc/productuserquotation/down', { id }).then(res => {
    if (res && res.code === 0) {
      ElMessage.success('下架成功');
       state.refreshDataList()
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 获取分类列表
const getClassList = () => {
  baseService.get('/noc/nocclassify/list2').then(res => {
    // 确保数据结构符合级联选择器要求
    classOptions.value = res.data;
    console.log('分类数据加载成功:', classOptions.value);
  }).catch(error => {
    console.error('获取分类数据出错:', error);
    ElMessage.error('获取分类数据出错');
  });
};


const handleClassChange = (value: string[]) => {
  state.dataForm.class1Id = value && value.length > 0 ? value[0] : "";
  state.dataForm.class2Id = value && value.length > 1 ? value[1] : "";
  state.dataForm.class3Id = value && value.length > 2 ? value[2] : "";
};

// 重置表单
const resetForm = () => {
    state.dataForm.id = '';
    state.dataForm.productName = '';
    state.dataForm.seriesName = '';
    state.dataForm.brandName = '';
    state.dataForm.class1Id = '';
    state.dataForm.class2Id = '';
    state.dataForm.class3Id = '';
    state.dataForm.status = '';
    state.dataForm.minQuotation = '';
    state.dataForm.maxQuotation = '';
    selectedClassPath.value= [];
    state.limit = 15;
    state.getDataList();
};

// 初始化时获取分类列表
getClassList();

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;
state.limit = 15;
</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
    white-space: nowrap;
}

.el-input {
    width: 218px;
    height: 32px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
}

.form {
    display: flex;
    justify-content: space-between;
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应列宽，每列至少200px */
    gap: 16px; /* 元素间距 */
}


</style>
